<template>
  <div class="audition120">
    <p><span class="color">position: sticky;</span>称为粘性定位，</p>
    <p>元素初始状态就像普通的元素一样，放置在父盒子中</p>
    <p>当父盒子中的内容滚动到指定的top和left位置时，元素就粘在了这个固定位置</p>
    <p>当父盒子中的内容又滚动到该元素和初始位置时，元素又变得和普通元素一样，回到了标准流中</p>
    <p>举个例子，试着在下面的盒子中滚动鼠标滚轮，查看效果：</p>
    <div class="box">
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <div class="box1">hello</div>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
      <p>doahgajgoaiioafjapjgjgjgpjg</p>
    </div> 
    <p>上述示例代码：</p>
    <v-md-preview :text="text1" />
    <hr>
    <p>下面再介绍一个更好玩的玩法：</p>
    <p>试着在下面黑框中滚动鼠标滚轮，查看效果：</p>
    <div class="box2">
      <h1>Sticky position</h1>
      <div class="sticky">A</div>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <div class="sticky">B</div>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <div class="sticky">C</div>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <div class="sticky">D</div>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
      <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
    </div>
    <p>上述示例代码：</p>
    <v-md-preview :text="text2" />
  </div>
</template>

<script>
const prefix = '``` html'
const suffix = '```'
export default {
  name: 'Audition120',
  data() {
    return {
      text1: `${prefix}
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
          .box {
            position: relative;
            width: 400px;
            height: 200px;
            margin: auto;
            margin-top: 30px;
            border: 1px solid #333;
            overflow: hidden;
            overflow-y: auto;
          }
          .box p {
            text-align: center;
          }
          .box1 {
            position: sticky;
            top: 0;
            left: 0;
            width: 100%;
            height: 60px;
            background-color: rgba(255, 0, 0, .3);
            font-size: 24px;
            text-align: center;
            line-height: 60px;
            border: 1px solid red;
          }
        </style>
      </head>
      <body>
        <div class="box">
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <div class="box1">hello</div>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
          <p>doahgajgoaiioafjapjgjgjgpjg</p>
        </div>
      </body>
      </html>
      \n${suffix}`,
      text2: `${prefix}
      <!DOCTYPE html>
      <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
          .box2 {
            width: 400px;
            height: 150px;
            overflow: hidden;
            overflow-y: auto;
            border: 1px solid #333;
            font-size: 16px;
          }
          .box2 p {
            text-align: center;
          }
          .sticky {
            position: sticky;
            top: 0;
            left: 0;
            background-color: rgba(0, 0, 0, .8);
            color: #fff;
            font-size: 24px;
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
          }
        </style>
      </head>
      <body>
        <div class="box2">
          <h1>Sticky position</h1>
          <div class="sticky">A</div>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <div class="sticky">B</div>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <div class="sticky">C</div>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <div class="sticky">D</div>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
          <p>哈哈哈哈哈哈哈哈哈哈哈哈哈哈</p>
        </div>
      </body>
      </html>
      \n${suffix}`,
    }
  }
}
</script>

<style lang="less" scoped>
.box {
  position: relative;
  width: 400px;
  height: 200px;
  border: 1px solid #333;
  overflow: hidden;
  overflow-y: auto;
}
.box p {
  text-align: center;
}
.box1 {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-color: rgba(255, 0, 0, .3);
  font-size: 24px;
  text-align: center;
  line-height: 60px;
  border: 1px solid red;
}
.box2 {
  width: 400px;
  height: 150px;
  overflow: hidden;
  overflow-y: auto;
  border: 1px solid #333;
  font-size: 16px;
}
.box2 p {
  text-align: center;
}
.sticky {
  position: sticky;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, .8);
  color: #fff;
  font-size: 24px;
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
}
</style>